<template>
  <my-layout sTitle="商品详情">
    <div slot="content">
      <div class="detail-wrapper-box">
        <div class="nav-tab">
          <span
            v-for="(item,index) in nav"
            @click="goAnchors(item)"
            :key="index"
            :class="{'active': index === isShowNav}"
          >{{item.label}}</span>
        </div>
        <navtab @handleMask="handleMask" :info="info" :infoPic="picList"/>
        <detailbox :desc="desc"/>
        <recommend v-show="isShowRec" :infoRec="info.recGoods"/>
        <popmask
          :temp="isShowMask"
          :specsList="specsList"
          :info="info"
          @closeMask="closeMask"
          @guige="guige"
          ref="myMsg"
        />
        <my-popup :isShowpop="isShowPopup"></my-popup>
      </div>
    </div>
    <div slot="footers">
      <div class="footer-cart">
        <div class="btn-car" @click="btnAddCart">加入购物车</div>
      </div>
    </div>
  </my-layout>
</template>

<script>
import navtab from "./components/detailNav";
import detailbox from "./components/detailbox";
import recommend from "./components/recommend";
import popmask from "./components/detailMask";
export default {
  props: {},
  components: {
    navtab,
    detailbox,
    recommend,
    popmask
  },
  data() {
    return {
      isShowMask: false,
      isShowNav: 0,
      isShowPopup: false,
      isShowRec: false,
      nav: [
        {
          num: 0,
          label: "搜索",
          target: ".sear-box"
        },
        {
          num: 1,
          label: "详情",
          target: ".detail-box"
        },
        {
          num: 2,
          label: "推荐",
          target: ".recommend"
        }
      ],
      info: [], // 详情接口
      picList: [], // 详情轮播图
      specsList: [], // 详情规格
      desc: [], // 详情图片
      defSpesc: [], // 详情默认规格
      temp: {} // 选中商品列表
    };
  },
  watch: {
    $route() {
      this.getDetail();
      console.log(111);
    }
  },
  methods: {
    async getDetail() {
      let id = this.$route.query.id;
      const { data } = await this.$http.post("goods/detail", {
        id: id
      });
      if (data.code == 0) {
        this.info = data.good;
        // 子组件显示的值
        this.picList = JSON.parse(data.good.pics);
        this.specsList = JSON.parse(data.good.specs);
        this.desc = JSON.parse(data.good.desc);
        if (this.info.recGoods.length) {
          this.isShowRec = true;
        } else {
          this.isShowRec = false;
        }
      }
    },
    async addPub(id, num) {
      const { data } = await this.$http.post("cart/addPub", {
        gdid: id,
        addNum: num
      });
    },
    // 添加购物车
    btnAddCart() {
      // 隐藏 显示弹框
      if (!this.isShowMask) {
        this.isShowMask = !this.isShowMask;
      } else {
        // console.log()
        this.addPub(this.temp.gid, this.temp.handleNum);

        // 弹框遮罩
        this.isShowPopup = true;
        this.isShowMask = !this.isShowMask;
        let time = setTimeout(() => {
          this.isShowPopup = false;
        }, 1200);
      }
    },
    closeMask() {
      this.isShowMask = false;
    },
    //锚点跳转
    goAnchors(el) {
      this.isShowNav = el.num;
      this.$el.querySelector(el.target).scrollIntoView({
        behavior: "smooth"
      });
    },
    handleMask() {
      this.isShowMask = true;
    },
    // 获取子组件传来的规格
    guige(val) {
      this.temp = val;
    }
  },
  mounted() {
    this.getDetail();
  }
};
</script>

<style lang="scss">
.detail-wrapper-box {
  background: #f7f7f7;
  padding-bottom: 100px;
  .nav-tab {
    line-height: 100px;
    margin: 0 auto;
    overflow: hidden;
    background: #ffffff;
    padding: 0 100px;
    position: fixed;
    width: 1080px;
    top: 126px;
    left: 0;
    right: 0;
    z-index: 999;
    span {
      font-size: 36px;
      color: #7f7f7f;
      text-align: center;
      width: 33%;
      float: left;
    }
    .active {
      color: #5252a1;
      position: relative;
    }
    .active:before {
      display: block;
      content: "";
      position: absolute;
      width: 100px;
      height: 4px;
      background: #5252a1;
      bottom: 20px;
      left: 50%;
      margin-left: -50px;
    }
  }
}
.footer-cart {
  width: 1080px;
  z-index: 1110;
  background: #fff;
  border-top: 2px solid #e6e6e6;
  .btn-car {
    width: 308px;
    height: 76px;
    background: #5252a1;
    border-radius: 50px;
    font-weight: 500;
    color: #fff;
    font-size: 32px;
    line-height: 76px;
    text-align: center;
    margin: 22px auto;
  }
}
</style>
